import React, { Component, useState } from 'react'
import { Layout, Menu } from 'antd'
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import './App.css';
import LogTable from './Table.js'
import JobMoudle from './modules/Job/index.js';
import DataMoudle from './modules/DataCollect/index.js';

const { Content, Header } = Layout;

function App()  {
  const [current, setCurrent] = useState('data')

    return (
      <Router>
        <Layout>
          <Header>
          <Menu
              selectedKeys={[current]}
              mode="horizontal" 
              theme="dark"
              onClick={({key})=>{
                setCurrent(key)
              }}
            >
              <Menu.Item key="job">
                <Link to="/jobList">职位筛选</Link>
              </Menu.Item>
              <Menu.Item key="log">
                <Link to="/log">历史记录</Link>
              </Menu.Item>
              <Menu.Item key="data">
                <Link to="/dataCollect">数据采集</Link>
              </Menu.Item>
            </Menu>
          </Header>
          <Content>
            <Routes>
              <Route path="/log" element={<LogTable/>} />
              <Route path="/jobList/*" element={<JobMoudle/>} />
              <Route index path="/dataCollect/*" element={<DataMoudle/>} />
            </Routes>
          </Content>
        </Layout>
      </Router>
    );
  

}

export default App;
